<template>
  <div>
    <el-card :bordered="false" dis-hover>
      <el-form
        ref="levelFrom"
        :model="cityFrom"
        inline
        label-position="right"
        @submit.native.prevent
      >
        <el-row type="flex" :gutter="24">
          <el-form-item label="状态：" label-for="status">
            <el-select
              v-model="cityFrom.status"
              placeholder="请选择"
              clearable
              element-id="status1"
              @change="citySearchs"
            >
              <el-option :value="1" label="显示"></el-option>
              <el-option :value="0" label="不显示"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="关键字：" label-for="title">
            <el-input
              v-model="cityFrom.keyword"
              placeholder="请输入关键字"
            >
            <el-button slot="append" type="primary" icon="el-icon-search" @click="citySearch"></el-button>
            </el-input>
          </el-form-item>
        </el-row>
        <el-row type="flex">
          <el-col v-bind="grid">
            <el-button type="primary" icon="md-add" @click="add">添加城市</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="cityLists"
        ref="table"
        class="mt25"
        :loading="loading"
        highlight-row
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
      >
        <el-table-column label="Id">
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
        <el-table-column label="城市名称">
          <template slot-scope="scope">{{scope.row.cityName}}</template>
        </el-table-column>
        <el-table-column label="排序">
          <template slot-scope="scope">{{scope.row.sort}}</template>
        </el-table-column>
        <el-table-column label="是否显示">
          <template slot-scope="scope">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.status"
              @change="onchangeIsShow(scope.row)"
              active-text="是"
              inactive-text="否"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a @click="edit(scope.row.id)">修改</a>
            <el-divider direction="vertical" />
            <a @click="del(scope.row,'删除城市',scope.$index)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <!-- 城市编辑表单 -->
      <el-dialog title="编辑城市" foothide :visible.sync="modals" @close="cancel">
        <edit-info v-if="modals" :id="table.id" @submitSuccess="submitSuccess" @cancel="cancel"></edit-info>
      </el-dialog>
      <div class="acea-row row-right page">
        <el-pagination
          background
          :page-size="cityFrom.limit"
          :current-page="cityFrom.page"
          :total="total"
          @current-change="pageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import editInfo from './handle/editInfo.vue';
import { cityList, setCityShowApi,cityDelApi  } from '@/api/base';
export default {
  name: 'cityList',
  components: {
    editInfo,
  },
  data() {
    return {
      modals: false,
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
      cityFrom: {
        page: 1,
        limit: 15,
        keyword: '',
        status: '',
      },
      table: {
        id: 0,
      },
      cityLists: [],
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 城市添加
    add() {
      this.modals = true;
    },
    edit(id) {
      this.table.id = id;
      this.modals = true;
    },
    cancel() {
      this.table = {
        id: 0,
      };
      this.modals = false;
    },
    // 城市列表
    getList() {
      this.loading = true;
      cityList(this.cityFrom)
        .then((res) => {
          let data = res;
          console.log(res);
          this.cityLists = data.list;
          this.total = data.total;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
    submitSuccess() {
      this.table.id = 0;
      this.modals = false;
      this.getList();
    },
    // 分页
    pageChange(index) {
      this.cityFrom.page = index;
      this.getList();
    },
    // 城市删除
    del(row, tit, num) {
      this.$modalSure(`删除${row.cityName}`)
        .then(() => {
          cityDelApi(row.id).then((res) => {
            this.$message.success('删除成功');
            this.cityLists.splice(num, 1);
            this.getList();
          }).catch(err => {
            this.$message.error('删除失败');
          });
        })
        
    },
    // 显示/隐藏
    onchangeIsShow(row) {
      let data = {
        id: row.id,
        status: row.status,
      };
      setCityShowApi(data)
        .then(async (res) => {
          this.$message.success('操作成功');
        })
        .catch((res) => {
          this.$message.error('操作失败');
        });
    },
    // 搜索
    citySearchs() {
      this.cityFrom.page = 1;
      this.getList();
    },
  },
};
</script>

<style scoped lang="stylus"></style>
